<style lang="scss">
  @import "../../../assets/css/_variable";

  .leaf-view {
    .bread {
      height: 134px;
      background-color: $color-khan-blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .resume {
      height: 100px;
      margin: 1em 2em 1em 2em;
    }

    .missions {
      background-color: $color-white;
      .title {
        padding: $margin-normal;
        font-size: $font-size-title;
        color: $color-primary;
      }
      .mission {
        height: 50px;
        width: 100%;
        padding:0 $margin-normal;
        line-height: 50px;
        border: solid 1px $color-gray;
      }
    }

  }
</style>
<template>
  <div class="leaf-view">
    <xy-header></xy-header>
    <div class="bread">
      <template>
        <div class="color-extra-light-gray" @click="goToClue(node.parentClue.id)">
          <i class="el-icon-arrow-left"> </i> {{parent.name}}
        </div>
        <h1 class="color-white font-header">{{node.name}}</h1>
      </template>
    </div>
    <div class="missions">
      <div class="title">
        线索任务
      </div>
      <template v-for="mission in missions">
        <div class="mission" @click="goExercise(mission)">
          {{mission.name}}
        </div>
      </template>
    </div>

  </div>

</template>

<script>
  import XyHeader from '../sys/components/XyHeader.vue'

  export default {
    components: {
      XyHeader
    },
    data() {
      return {
        root: '0',
        node: {
          id: '',
          name: '',
          parentClue: {
            id: '',
            name: '',
          },
        },
        activeTab: 'sub',
        missions: []
      }
    },
    computed: {
      parent() {
        if (this.node && this.node.parentClue) {
          return this.node.parentClue;
        }
        return {id: '', name: ''};
      }
    },
    methods: {
      clickTab(tab, event) {

      },
      load() {
        this.getClue();
        this.getMissions();
      },
      getClue() {
        let url = this.$store.state.app.api.el + 'clue/getClue';
        url += '?id=' + this.root;
        this.$http.get(url).then((data) => {
          this.node = data;
        });
      },

      goToClue(id) {
        this.$router.push({name: '线索', query: {root: id}});
      },
      getMissions() {
        let url = this.$store.state.app.api.el + 'mission/getMissionByClue';
        url += '?clueId=' + this.root;
        this.$http.get(url).then((data) => {
          this.missions = data;
        });
      },
      goExercise(mission) {
        let url = this.$store.state.app.api.el + 'task/getTaskByMission?mission=' + mission.id;
        this.$router.push({path: 'exercise', query: {url}});
      }
    },
    created() {
      this.root = this.$route.query['root'];
      this.load();
    },
    mounted(){

    },
    updated(){

    }
  }
</script>
